/* FUNCTIONS */
trig(op, angle_deg) // deg
  angle_rad = (angle_deg * 3.14) / 180
  return unit(math( angle_rad , op),'')

atan(a,b)
  x = math( a/b , 'atan')
  return (x * 180) / 3.14 //deg

$angle = 25deg
$sin-angle = trig('sin',$angle)
$cos-angle = trig('cos',$angle)
$tan-angle = trig('tan',$angle)

/* COLORS */
$crane-main-color = #f8d02d
$crane-additional-color = #f2b226
$load-jib-main-color = #f5c523
$layer-stage-1-top-side-color = #8eb780
$layer-stage-1-left-side-color = #6da763
$layer-stage-1-right-side-color = #47984a
$layer-stage-2-top-side-color = #7c85b2
$layer-stage-2-left-side-color = #6c6990
$layer-stage-2-right-side-color = #54527d
$layer-stage-3-top-side-color = #eb9979
$layer-stage-3-left-side-color = #e57d5d
$layer-stage-3-right-side-color = #df6042
$box-left-back-side-color = #1d7d81
$box-right-back-side-color = #569094
$box-left-front-side-color = #6f706f
$box-right-front-side-color = #4d4d4d
$box-bottom-side-color = #a2bfc1
$rope-color = #979797
$rope-circle-color = #2e2e2e
$trolley-color = #4f4f4f

/* LOAD-JIB-PARTS */
$load-jib-bar-thickness = 12px
$load-jib-height = 96px
//left part
$load-jib-1-min-height = 60px
$load-jib-1-width = 125px
$load-jib-1-angle = round(atan($load-jib-height - $load-jib-1-min-height, $load-jib-1-width))deg
$load-jib-1-inner-part-number = 3
$load-jib-1-inner-part-thickness = 10px
$load-jib-1-inner-part-width = round(($load-jib-1-width - (($load-jib-1-inner-part-number - 1) * $load-jib-1-inner-part-thickness)) / $load-jib-1-inner-part-number)
//middle part
$load-jib-2-width = 95px
$load-jib-2-inner-part-thickness = 5px
$load-jib-2-inner-part-height = round(($load-jib-height - 2 * $load-jib-bar-thickness - 2 * $load-jib-2-inner-part-thickness) / 3)
$load-jib-2-inner-part-width = ($load-jib-2-width - (2 * $load-jib-bar-thickness))
$load-jib-2-inner-part-thickness-scaled = $load-jib-2-inner-part-thickness * 1.5
$load-jib-2-inner-part-angle = round(atan((($load-jib-2-inner-part-width / 2) - $load-jib-2-inner-part-thickness / 2 ), $load-jib-2-inner-part-height))deg
//right part
$load-jib-3-width = 320px
$load-jib-3-min-height = 45px
$load-jib-3-angle = round(atan($load-jib-height - $load-jib-3-min-height, $load-jib-3-width))deg
$load-jib-3-part-width = 70px
$load-jib-3-part-delta-height = $load-jib-3-part-width * trig('tan', $load-jib-3-angle)
$load-jib-3-inner-part-number = 5
$load-jib-3-inner-part-thickness = $load-jib-1-inner-part-thickness
$load-jib-3-inner-part-width = round(($load-jib-3-width - $load-jib-3-part-width - (($load-jib-3-inner-part-number - 1) * $load-jib-3-inner-part-thickness)) / $load-jib-3-inner-part-number)

/* TOWER */
$tower-cabin-height = 50px
$tower-cabin-width = 65px
$tower-cabin-offset-top = 10px
$tower-cabin-window-height = 23px
$tower-cabin-window-width = 18px
$tower-cabin-window-offset-top = 13px
$tower-cabin-window-offset-side = 11px
$tower-cabin-bottom-part-height = 13px
$tower-cabin-bottom-part-height-delta = 5px
$tower-cabin-bottom-part-angle = round(atan($tower-cabin-bottom-part-height-delta, $tower-cabin-width))deg

$tower-part-1-height = 75px
$tower-part-1-width = 95px

$tower-part-2-height = 35px

$tower-part-3-height = 90px
$tower-part-3-delta-width = 16px
$tower-part-3-width = $tower-part-1-width - (2 * $tower-part-3-delta-width)

$tower-part-2-3-inner-width = 35px
$tower-part-2-3-inner-border = 4px

$tower-part-4-height = 15px
$tower-part-4-width = 95px

$tower-part-5-height = 95px
$tower-part-5-width = $tower-part-3-width

$tower-part-6-height = 6px
$tower-part-7-height = 80px
$tower-part-9-height = 95px
$tower-part-11-height = 130px

$crane-height = $load-jib-height + $tower-part-1-height + $tower-part-2-height +$tower-part-3-height + $tower-part-4-height + $tower-part-5-height + $tower-part-6-height + $tower-part-7-height + $tower-part-6-height + $tower-part-9-height + $tower-part-6-height + $tower-part-11-height
$box-offset = $crane-height
$tower-offset-left = $load-jib-1-width
$tower-offset-top = $load-jib-height

/* LAYERS 1, 2, 3, 4 */
/* ROPES */
$rope-thickness = 2px
$layer-side-length-max = 125px

$layers-hash = {
  '1': {
    'top-side-color': $layer-stage-1-top-side-color
    'left-side-color': $layer-stage-1-left-side-color
    'right-side-color': $layer-stage-1-right-side-color
    'layer-side-length': $layer-side-length-max
    'offset': 0
  }
  '2': {
    'top-side-color': $layer-stage-2-top-side-color
    'left-side-color': $layer-stage-2-left-side-color
    'right-side-color': $layer-stage-2-right-side-color
    'layer-side-length': $layer-side-length-max - 15px
    'offset': 1
  }
  '3': {
    'top-side-color': $layer-stage-3-top-side-color
    'left-side-color': $layer-stage-3-left-side-color
    'right-side-color': $layer-stage-3-right-side-color
    'layer-side-length': $layer-side-length-max - 30px
    'offset': 2
  }
  '4': {
    'top-side-color': $layer-stage-1-top-side-color
    'left-side-color': $layer-stage-1-left-side-color
    'right-side-color': $layer-stage-1-right-side-color
    'layer-side-length': $layer-side-length-max - 45px
    'offset': 3
  }
  '5': {
    'top-side-color': $layer-stage-1-top-side-color
    'left-side-color': $layer-stage-1-left-side-color
    'right-side-color': $layer-stage-1-right-side-color
    'layer-side-length': $layer-side-length-max - 60px
    'offset': 4
  }
  '6': {
    'top-side-color': $layer-stage-1-top-side-color
    'left-side-color': $layer-stage-1-left-side-color
    'right-side-color': $layer-stage-1-right-side-color
    'layer-side-length': $layer-side-length-max - 75px
    'offset': 5
  }
}
$layer-height = 30px
$layer-offset-top = $layers-hash['1']['layer-side-length']
$layer-slide-in-offset-left = $layer-offset-top
$layer-rope-height = $layer-offset-top

/* TROLLEY */
$trolley-height = 27px
$trolley-width = 34px
$trolley-offset-top = 0
$trolley-offset-left = 0
$trolley-start-point = -($layer-side-length-max)
$trolley-moving-distance = $layer-side-length-max + $load-jib-1-width + $load-jib-2-width + $load-jib-3-width - $trolley-width
$trolley-end-point = $trolley-start-point + $trolley-moving-distance

/* TROLLEY-BLOCK */
$trolley-block-offset-top = $load-jib-height
$trolley-block-offset-left = -($trolley-width / 2)

/* BOX */
$box-side-height = 40px
$box-side-width = 170px
$box-bottom-side-length = $box-side-width / $cos-angle
$box-bottom-side-offset-top = $box-side-width * $tan-angle
$box-offset-left = $trolley-end-point - $box-side-width
$box-offset-top = $box-offset - ($box-side-height + $box-bottom-side-offset-top)

/* ROPE 3 BLOCK*/
$rope-3-left-offset-left = 11px
$rope-3-right-offset-left = $trolley-width - $rope-3-left-offset-left - $rope-thickness
$rope-3-circle-radius = round(($trolley-width / 2 - $rope-3-left-offset-left))
$rope-3-height = $rope-3-circle-radius + 10px
$rope-3-moving-distance = $box-offset-top + $box-side-height - $trolley-block-offset-top - $trolley-height - $rope-3-height - $layer-rope-height - $layer-height
$rope-3-offset-top = 0
$rope-3-offset-left = ($trolley-width / 2 - $rope-thickness / 2)
$rope-3-start-point-height = $rope-3-height
$rope-3-end-point-height = $rope-3-height + $rope-3-moving-distance

/* LAYERS IN BOX */
$layers-in-box-offset-top = $box-offset-top

/* ANIMATIONS */
$animations-hash = {
  'slide-trolley':  {
    '0': {
      transform: translate3d(0,0,0)
    }
    '5': {
      transform: translate3d(0,0,0)
    }
    '40': {
      transform: translate3d(($trolley-end-point - $trolley-start-point),0,0)
    }
    '90': {
      transform: translate3d(($trolley-end-point - $trolley-start-point),0,0)
    }
    '100': {
      transform: translate3d(0,0,0)
    }
  }
  'rope-3-move':  {
    '0': {
      height: $rope-3-start-point-height
    }
    '40': {
      height: $rope-3-start-point-height
    }
    '70': {
      height: $rope-3-end-point-height
    }
    '75': {
      height: $rope-3-end-point-height
    }
    '90': {
      height: $rope-3-start-point-height
    }
    '100': {
      height: $rope-3-start-point-height
    }
  }
  'ropes': {
    '0': {
      opacity: 0
    }
    '5': {
      opacity: 1
    }
    '73': {
      opacity: 1
    }
    '75': {
      opacity: 0
    }
    '100': {
      opacity: 0
    }
  }
  'layer': {
    '0': {
      opacity: 1
    }
    '73': {
      opacity: 1
    }
    '75': {
      opacity: 0
    }
    '100': {
      opacity: 0
    }
  }
  'layer-in-box': {
    '0': {
      opacity: 1
    }
    '5': {
      opacity: 0
    }
    '40': {
      opacity: 0
    }
    '70': {
      opacity: 0
    }
    '72': {
      opacity: 1
    }
    '100': {
      opacity: 1
    }
  }
}
for $name in $animations-hash
  @keyframes {$name}
    for $percent, $transform in $animations-hash[$name]
      {1% * $percent}
        {$transform}

$che-crane-width = ($load-jib-1-width + $load-jib-2-width + $load-jib-3-width + $layer-side-length-max + 10px)

.che-loader-crane-offset-wrapper
  position relative
  bottom -100px

.che-loader-crane-scale-wrapper
  transform-origin top left
  height $crane-height
  width $che-crane-width
  position relative
  bottom 0
  z-index 2

.che-loader-crane.che-loader-no-animation
  .che-loader-animation
    animation none

.che-loader-crane
  position relative
  bottom 0
  left 0
  height $crane-height
  width $che-crane-width
  overflow hidden

  .che-loader-animation
    animation-direction normal
    animation-duration 7s
    animation-iteration-count infinite
    animation-timing-function cubic-bezier(0.42, 0.0, 0.58, 1.0)
    animation-fill-mode forwards

    //enable hardware acceleration if any
    position relative
    //transform translate3d(0,0,0)
    backface-visibility hidden
    perspective 1000px

  .tower
    position absolute
    top $tower-offset-top
    left $tower-offset-left

    div
      background-color $crane-main-color

    .tower-part-1
      position relative
      height $tower-part-1-height
      width $tower-part-1-width
      box-sizing border-box
      border 6px solid $crane-additional-color
      border-top none

    .tower-cabin
      position absolute
      top $tower-cabin-offset-top
      left -($tower-cabin-width)
      height $tower-cabin-height
      width $tower-cabin-width
      border-bottom 4px solid $crane-additional-color
      z-index 10

      div
        background-color #000
        height $tower-cabin-window-height
        width $tower-cabin-window-width
        position absolute
        top $tower-cabin-window-offset-top

      .tower-cabin-window-1
        left $tower-cabin-window-offset-side
      .tower-cabin-window-2
        right $tower-cabin-window-offset-side
      .tower-cabin-window-3
        left $tower-cabin-width + ($tower-part-1-width / 2) - ($tower-cabin-window-width / 2)

    .tower-cabin-bottom-part
      position absolute
      top ($tower-cabin-height + $tower-cabin-offset-top)
      left -($tower-cabin-width)
      height $tower-cabin-bottom-part-height
      width $tower-cabin-width
      transform-origin top right
      transform skewY($tower-cabin-bottom-part-angle)
      z-index 0

    .tower-part-2
      height $tower-part-2-height
      width $tower-part-1-width

    .tower-part-2
      div
        position relative
        top 0
        left ($tower-part-1-width / 2 - $tower-part-2-3-inner-width / 2)
        height 100%
        width $tower-part-2-3-inner-width
        box-sizing border-box
        border-left $tower-part-2-3-inner-border solid $crane-additional-color
        border-right $tower-part-2-3-inner-border solid $crane-additional-color

    .tower-part-3
      position relative
      top 0
      border-top $tower-part-3-height solid $crane-main-color
      border-left $tower-part-3-delta-width solid rgba(0, 0, 0, 0)
      border-right $tower-part-3-delta-width solid rgba(0, 0, 0, 0)
      height 0
      width $tower-part-3-width
      box-sizing content-box
      background-color rgba(0,0,0,0)

      div
        position relative
        top -($tower-part-3-height)
        left ($tower-part-3-width / 2 - $tower-part-2-3-inner-width / 2)
        height $tower-part-3-height
        width $tower-part-2-3-inner-width
        box-sizing border-box
        border-left $tower-part-2-3-inner-border solid $crane-additional-color
        border-right $tower-part-2-3-inner-border solid $crane-additional-color

    .tower-part-4
      height $tower-part-4-height
      width $tower-part-4-width
      background-color $crane-additional-color

    .tower-part-5
      position relative
      top 0
      left $tower-part-3-delta-width
      height $tower-part-5-height
      width $tower-part-5-width

    .tower-part-6, .tower-part-8, .tower-part-10
      position relative
      top 0
      left $tower-part-3-delta-width
      height $tower-part-6-height
      width $tower-part-5-width
      background-color $crane-additional-color

    .tower-part-7
      position relative
      top 0
      left $tower-part-3-delta-width
      height $tower-part-7-height
      width $tower-part-5-width

    .tower-part-9
      position relative
      top 0
      left $tower-part-3-delta-width
      height $tower-part-9-height
      width $tower-part-5-width

    .tower-part-11
      position relative
      top 0
      left $tower-part-3-delta-width
      height 0
      width $tower-part-5-width

      $_leg-offset-side = ($tower-part-11-height / 3)
      .tower-leg
        position absolute
        top 0
        height 0
        widht 0

      .left-leg
        left -($_leg-offset-side)

      .right-leg
        right -($_leg-offset-side)

      .tower-leg
        $_hip-height = ($tower-part-11-height / 3)
        $_hip-width = $tower-part-5-width / 2
        $_hip-part-2-offset-top = 10px
        $_hip-part-1-angle = round(atan($_leg-offset-side, $_hip-height))deg
        $_hip-part-2-angle = round(atan($_leg-offset-side + $_hip-width, $_hip-height + $_hip-part-2-offset-top))deg

        .left-leg-hip, .right-leg-hip
          position relative
          top 0

          div
            position absolute
            top 0
            height $_hip-height
            width $_hip-width
            background-color $crane-main-color
            box-sizing border-box
            transform-origin bottom left

        .left-leg-hip
          div
            left 0

          div:first-child
            transform skewX(-($_hip-part-1-angle))

          div:last-child
            height ($_hip-height + $_hip-part-2-offset-top)
            transform skewX(-($_hip-part-2-angle))

        .right-leg-hip
          div
            right 0

          div:first-child
            transform skewX($_hip-part-1-angle)

          div:last-child
            height ($_hip-height + $_hip-part-2-offset-top)
            transform skewX($_hip-part-2-angle)

        $_shin-width = 20px
        $_shin-height = $tower-part-11-height - $_hip-height
        $_shin-part-2-height = $_shin-height - $_hip-part-2-offset-top
        $_shin-angle = round(atan(($_hip-width - $_shin-width), $_shin-part-2-height))deg
        .left-leg-shin, .right-leg-shin
          position relative
          top $_hip-height

          div
            position absolute
            top 0
            height $_shin-height
            width $_shin-width
            background-color $crane-main-color
            transform-origin bottom left

        .left-leg-shin
          div
            left 0

          div:last-child
            top $_hip-part-2-offset-top
            height $_shin-part-2-height
            transform skewX(-($_shin-angle))

        .right-leg-shin
          div
            right 0

          div:last-child
            top $_hip-part-2-offset-top
            height $_shin-part-2-height
            transform skewX($_shin-angle)

      .crossbar
        position absolute
        top 50px
        left -($_leg-offset-side)
        height 10px
        width ($tower-part-5-width + (2 * $_leg-offset-side))
        background-color $crane-additional-color
  // .tower

  .load-jib
    position absolute
    top 0
    left 0

    .load-jib-1
      position relative
      height $load-jib-height
      width $load-jib-1-width
      overflow hidden

      .load-jib-1-1, .load-jib-1-2
        height $load-jib-bar-thickness
        width $load-jib-1-width
        background-color $load-jib-main-color

      .load-jib-1-1
        position absolute
        top 0
        right 0
        transform-origin top right
        transform skewY(-($load-jib-1-angle))

      .load-jib-1-2
        position absolute
        bottom 0
        right 0

      $load-jib-1-inner-part-delta-height = round(($load-jib-height - $load-jib-1-min-height) / $load-jib-1-inner-part-number)
      for $num in (1..$load-jib-1-inner-part-number)
        $_inner-part-height = $load-jib-1-min-height + ($num * $load-jib-1-inner-part-delta-height) - 2px
        .load-jib-1-inner-part-{$num}
          position absolute
          bottom 0
          left (($num - 1) * ($load-jib-1-inner-part-width + $load-jib-1-inner-part-thickness))
          height $_inner-part-height
          width $load-jib-1-inner-part-width
          box-sizing content-box
          border-right $load-jib-1-inner-part-thickness solid $load-jib-main-color

          $_angle = round(atan($load-jib-1-inner-part-width, ($_inner-part-height - 2 * $load-jib-1-inner-part-thickness)))deg
          $_height-scaled = $_inner-part-height / trig('sin', $_angle)
          div
            background-color $load-jib-main-color
            position absolute
            top 0
            right -($load-jib-1-inner-part-thickness)
            height $_height-scaled
            width $load-jib-1-inner-part-thickness
            transform-origin top left
            transform rotate($_angle)


    .load-jib-1 div:last-child
      border none

    .load-jib-2
      position absolute
      top 0
      left $load-jib-1-width
      height $load-jib-height
      width $load-jib-2-width
      box-sizing border-box
      border $load-jib-bar-thickness solid $load-jib-main-color

      .load-jib-2-inner-part
        position relative
        height $load-jib-2-inner-part-height
        width 100%
        box-sizing content-box
        border-bottom 5px solid $crane-additional-color
        overflow hidden

        $scale-range = 2
        div
          position absolute
          top 0
          height $load-jib-2-inner-part-height
          width $load-jib-2-inner-part-thickness
          background-color $crane-additional-color

        div:first-child
          right 50%
          transform-origin top right
          transform rotate($load-jib-2-inner-part-angle) scaleY($scale-range)
        div:last-child
          left 50%
          transform-origin top left
          transform rotate(-($load-jib-2-inner-part-angle)) scaleY($scale-range)

      .load-jib-2-inner-part:last-child
        border none

    .load-jib-3
      position absolute
      top 0
      left ($load-jib-1-width + $load-jib-2-width)
      height $load-jib-height
      width $load-jib-3-width
      overflow hidden

      .load-jib-3-1, .load-jib-3-2
        height $load-jib-bar-thickness
        width $load-jib-3-width
        background-color $load-jib-main-color

      .load-jib-3-1
        position absolute
        top 0
        left 0
        transform-origin top left
        transform skewY($load-jib-3-angle)

      .load-jib-3-2
        position absolute
        bottom 0
        left 0

      .load-jib-3-3
        position absolute
        bottom 0
        right 0
        height $load-jib-3-min-height
        width 0
        border-left $load-jib-3-part-width solid $load-jib-main-color
        border-top $load-jib-3-part-delta-height solid rgba(0,0,0,0)

      $load-jib-3-inner-part-delta-height = round(($load-jib-height - $load-jib-3-min-height) / $load-jib-3-inner-part-number)
      for $num in (1..$load-jib-3-inner-part-number)
        $_inner-part-height = $load-jib-height - ($num * $load-jib-3-inner-part-delta-height)
        .load-jib-3-inner-part-{$num}
          position absolute
          bottom 0
          left (($num - 1) * ($load-jib-3-inner-part-width + $load-jib-3-inner-part-thickness))
          height $_inner-part-height
          width $load-jib-3-inner-part-width
          box-sizing content-box
          border-right $load-jib-3-inner-part-thickness solid $load-jib-main-color

          $_angle = round(atan(($load-jib-3-inner-part-width + $load-jib-3-inner-part-thickness), $_inner-part-height))deg
          $_height-scaled = $_inner-part-height / trig('cos', $_angle)
          div
            background-color $load-jib-main-color
            position absolute
            top 0
            left -($load-jib-3-inner-part-thickness / 2)
            height $_height-scaled
            width $load-jib-3-inner-part-thickness
            transform-origin top left
            transform rotate(-($_angle))

    .load-jib-3:after
      clear left

  //.load-jib

  .trolley-block
    position absolute
    top $trolley-block-offset-top
    left $trolley-block-offset-left + $trolley-start-point
    z-index 40

    .trolley
      height $trolley-height
      width $trolley-width
      background-color $trolley-color
      position relative
      top $trolley-offset-top
      left $trolley-offset-left

    .rope-3-block
      transform-origin top left

      position relative
      top $rope-3-offset-top
      left 0

      .rope-3-left, .rope-3-right
        background-color $rope-color
        height $rope-3-height
        width $rope-thickness

      .rope-3-left
        position relative
        top 0
        left $rope-3-left-offset-left

      .rope-3-right
        position absolute
        top 0
        left $rope-3-right-offset-left

      .rope-3-circle
        background-color $rope-circle-color
        height (2 * $rope-3-circle-radius)
        width (2 * $rope-3-circle-radius)
        border-radius $rope-3-circle-radius
        position absolute
        bottom -($rope-3-circle-radius)
        left $rope-3-left-offset-left
        z-index 200

  // .trolley-block

  .box
    position absolute
    top $box-offset-top
    left $box-offset-left

    .box-bottom-side
      background-color $box-bottom-side-color
      width $box-bottom-side-length
      height $box-bottom-side-length
      position absolute
      top floor($box-side-height - $box-bottom-side-offset-top)
      left $box-side-width
      transform-origin top left
      transform matrix($cos-angle, $sin-angle, -($cos-angle), $sin-angle, 0, 0)
      z-index 1

    .box-back-sides, .box-front-sides
      position relative
      top 0
      left 0
      z-index 1

    .box-front-sides
      z-index 50

    .box-left-back-side
      width $box-side-width
      height $box-side-height
      position absolute
      top 0
      left 0
      background-color $box-left-back-side-color
      transform-origin top left
      transform skewY(-($angle))

    .box-right-back-side
      width $box-side-width
      height $box-side-height
      position absolute
      top 0
      left $box-side-width
      background-color $box-right-back-side-color
      transform-origin top right
      transform skewY($angle)

    .box-left-front-side
      width $box-side-width
      height $box-side-height
      position absolute
      top 0
      left 0
      background-color $box-left-front-side-color
      transform-origin top left
      transform skewY($angle)

    .box-right-front-side
      width $box-side-width
      height $box-side-height
      position absolute
      top 0
      left $box-side-width
      background-color $box-right-front-side-color
      transform-origin top right
      transform skewY(-($angle))

// .box

for $index, $layer-props in $layers-hash
  $layer-side-length = $layer-props['layer-side-length']
  $top-side-color = $layer-props['top-side-color']
  $left-side-color = $layer-props['left-side-color']
  $right-side-color = $layer-props['right-side-color']
  $_border-color = $layer-props['border-color']
  $offset = $layer-props['offset']

  $layer-upper-side-length = round($layer-side-length / $cos-angle)
  $layer-upper-side-projection-vert = round($layer-upper-side-length * $sin-angle)

  /* LAYER'S FRONT ROPE */
  $layer-rope-height = $layer-offset-top - ($offset * $layer-height)
  $layer-rope-front-height = $layer-rope-height + $layer-upper-side-projection-vert

  /* LAYER'S LEFT/RIGHT ROPE */
  $layer-rope-left-angle = round(atan($layer-side-length - $rope-thickness, $layer-rope-height))deg
  $layer-rope-left-height = $layer-rope-height

  //position of layers which laying in box
  .che-loader-crane .layers-in-box .layer-{$index}
    position absolute
    top $box-side-height - ($layer-height * ($index))px
    left ($box-side-width)
    z-index 40

  //position of layers which moving
  .che-loader-crane .load
    position relative
    top 0
    left ($trolley-width / 2)

  // layers description
  .che-loader-crane .layer-{$index}
    .layer
      position relative
      top 0
      left -($layer-side-length)
      z-index 60

      .layer-upper-side
        background-color $top-side-color
        width $layer-upper-side-length + 0.5px
        height $layer-upper-side-length + 0.5px
        box-sizing border-box
        position relative
        top -($layer-upper-side-projection-vert)
        left ($layer-side-length )
        transform-origin top left
        transform matrix($cos-angle, $sin-angle, -($cos-angle), $sin-angle, 0, 0)

      .layer-front-sides
        position relative
        top 0

        .layer-left-side
          float left
          width $layer-side-length
          height $layer-height
          box-sizing border-box
          background-color $left-side-color
          transform-origin top left
          transform skewY($angle)

        .layer-right-side
          float left
          width $layer-side-length
          height $layer-height
          box-sizing border-box
          background-color $right-side-color
          transform-origin top right
          transform skewY(-($angle))

        .layer-right-side:after
          clear both
    // .layer

    .layer-ropes
      position relative
      top 0
      left -(floor($rope-thickness / 2))
      z-index: 100

      .layer-rope-front
        position absolute
        top 0
        left 0
        height $layer-rope-front-height
        width $rope-thickness
        background-color $rope-color

      .layer-rope-left
        position relative // this element defines size of parent element
        top 0
        left 0
        height $layer-rope-left-height
        width $rope-thickness
        background-color $rope-color
        transform-origin 0 0
        transform skewX(-($layer-rope-left-angle))

      .layer-rope-right
        position absolute
        top 0
        left 0
        height $layer-rope-left-height
        width $rope-thickness
        background-color $rope-color
        transform-origin 0 0
        transform skewX($layer-rope-left-angle)
// .layer-ropes
// .layer-{$index}

// define visibility of layers in box
.che-loader-crane
  .layers-in-box
    .layer-1, .layer-2, .layer-3, .layer-4
      opacity 0

.che-loader-crane.step-1
  .layers-in-box
    .layer-1
      opacity 1
    .layer-2, .layer-3, .layer-4
      opacity 0

.che-loader-crane.step-2
  .layers-in-box
    .layer-1 .layer
      animation-name none

    .layer-1, .layer-2
      opacity 1
    .layer-3, .layer-4
      opacity 0

.che-loader-crane.step-3
  .layers-in-box
    .layer-1, .layer-2
      .layer
        animation-name none

    .layer-1, .layer-2, .layer-3
      opacity 1
    .layer-4
      opacity 0

.che-loader-crane.step-4
  .layers-in-box
    .layer-1, .layer-2, .layer-3
      .layer
        animation-name none

    .layer-1, .layer-2, .layer-3, .layer-4
      opacity 1

.che-loader-crane.step-5
  .layers-in-box
    .layer-1, .layer-2, .layer-3, .layer-4
      .layer
        animation-name none

    .layer-1, .layer-2, .layer-3, .layer-4
      opacity 1

.layers-in-box
  position relative
  top $box-offset-top
  left $box-offset-left

.che-loader-crane.step-1, .che-loader-crane.step-2, .che-loader-crane.step-3, .che-loader-crane.step-4
  .layers-in-box .layer
    animation-name layer-in-box

  .trolley-block
    animation-name slide-trolley

    .rope-3-left, .rope-3-right
      animation-name rope-3-move

    .layer
      animation-name layer
    .layer-ropes
      animation-name ropes

@media (orientation: portrait)
  .che-loader-crane-scale-wrapper
    transform none
    display none
